{% extends 'base.html' %}

{% load static %}
 {% block title %}地址管理{% endblock %}
{% block header %}
    <script src="{% static '/assets/js/jquery.min.js'%}" type="text/javascript"></script>
    <script src={% static '/js/user.js' %}> </script>

		<script src="{% static '/assets/js/amazeui.js'%}"></script>
{% endblock %}

{% block content %}
    {% csrf_token %}

    <div class="Bott">
			<div class="wrapper clearfix" style="margin: 0 auto">
				<div class="zuo fl" style="margin-left: 100px">
					<h3>
						<a href="/"><img src="/{{ user.img }}" width="100px" height="100px"></a>
						<p class="clearfix"><span class="fl" style="font-size: 15px; margin-left: -12px;">[{{ user.email }}]</span>
                            <a href="/user/logout/"><span class="fr logout" style="font-size: 15px;">[退出登录]</span></a>
                        </p>
					</h3>
					<div>
            <ul>
                <li><a href="/user/usercenter/">个人信息</a></li>
            </ul>
            <ul>
				<li><a href="/user/mypassword/">修改密码</a></li>
			</ul>
            <ul>
                <li><a href="/user/myorder/">我的订单</a></li>
            </ul>
            <ul>
                <li><a href="/user/address/">地址管理</a></li>
            </ul>
            <ul>
                <li><a href="/">回到首页</a></li>
            </ul>

					</div>
				</div>
				<div class="you fl">
					<div class="user-address">
						<!--标题 -->
						<div class="clear"></div>
						<!--例子-->
						<div class="am-modal am-modal-no-btn" id="doc-modal-1">

							<div class="add-dress">

								<!--标题 -->
								<div class="am-cf am-padding">
									<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">修改地址</strong> </div>
								</div>
								<hr/>

								<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
									<form id="frm" class="am-form am-form-horizontal" method="post" onsubmit="return tijiao()">
                                        {% csrf_token %}
										<div class="am-form-group">
											<label for="user-name" class="am-form-label" >收货人</label>
											<div class="am-form-content">
												<input type="text" id="user-name" name="aname" placeholder="收货人" style="width: 300px;">
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-phone" class="am-form-label" >手机号码</label>
											<div class="am-form-content" >
												<input id="user-phone" name="aphone" placeholder="手机号必填" type="email" style="width: 300px;">
											</div>
										</div>
										<div class="am-form-group">
											<label for="user-address" class="am-form-label">所在地</label>
											<div class="am-form-content address">

												<select id="province" onchange="loadCity();">

												</select>
												<select id="city" onchange="loadTown()">

												</select>
												<select id="town" >

												</select>
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-intro" class="am-form-label">详细地址</label>
											<div class="am-form-content" >
												<textarea class="" rows="3" id="user-intro" name="addr" onfocus="getAddr()" style="width: 500px;" placeholder="输入详细地址"></textarea>
												<small>100字以内写出你的详细地址...</small>
											</div>
										</div>

										<div class="am-form-group">
											<div class="am-u-sm-9 am-u-sm-push-3">
												<a class="am-btn am-btn-danger" onclick="$('#frm').submit()">保存</a>
												<a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
											</div>
										</div>
									</form>
								</div>

							</div>

						</div>

					</div>

					<script type="text/javascript">
						$(document).ready(function() {
							$(".new-option-r").click(function() {
								$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
							});

							var $ww = $(window).width();
							if($ww>640) {
								$("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
							}

						})
					</script>

					<div class="clear"></div>

				</div>

            </div>


    </div>


{% endblock %}

{%block footer %}
    <script>
    $('.logout').click(function () {

        $.ajax({
            type:'post',
            url:'/user/logout/',
            data:'csrfmiddlewaretoken='+$('input[name="csrfmiddlewaretoken"]').val(),
            success:function(result){
                if (result.flag){
                    window.location='/user/login/'
                }

            }
        })
    });
    //三级联动
    //页面加载事件
    $(function(){
        loadProvince();
    });

    function loadProvince(){
        loadArea('province',0,loadCity);
    }

    function loadCity(){
        loadArea('city', $('#province').val(),loadTown);
    }

    function loadTown(){
        loadArea('town', $('#city').val());
    }


    function loadArea(selectId, pid, nextLoad){
        $.get('/user/loadArea/',{'pid':pid}, function (result) {

            $('#' + selectId).empty();
            // 将JSON格式字符串转成JSON对象数组
            console.log(result.area_list_json)
            var area_list = JSON.parse(result.area_list_json)

            //遍历
            // 去页面右键控制台可以看到数据，pk代表数据库中的areaid
            for (let i = 0;i < area_list.length;i++){
                // 获取每个area

                var area = area_list[i];
                $('#' + selectId).append("<option value='"+ area.pk+"'>"+area.fields.areaname+"</option>");

            }
            //判断是否还有下一项
            if(nextLoad != null){
                nextLoad()
            }

        });
    }
    function getAddr() {
        //jquire中select发内置方法获取到option中的值
        province = $("#province option:selected").text()
        city = $("#city option:selected").text()
        town = $("#town option:selected").text()

        //拼接
        var addr = province + city + town
        $('#user-intro').val(addr)
    }

    //地址表单提交校验
    function tijiao(){
         var aname = $('#user-name').val()
         var aphone = $('#user-phone').val()
         var addr = $('#user-intro').val()
         if(aname.length < 1){
             alert("请填写用户名！")
             return false
         }
         if(aphone.length < 1){
             alert("请填写电话号码！")
             return false
         }
         if(addr.length < 1){
             alert("请填写地址！")
             return false
         }
         $.ajax({
             url:'/address/',
             type:'POST',
             data:{
                 'aname':aname,
                 'aphone':aphone,
                 'addr':addr
             }

         })
        return true
    }




    </script>
{% endblock %}